import React from 'react'
import { Form, Input, Select } from 'antd'
import { User } from 'types/user'
import { Project } from './list'
import { UserSelect } from './../../components/user-select'

interface SearchPanelProps {
  users: User[]
  param: Pick<Project, 'name' | 'personId'>
  setParam: (param: SearchPanelProps['param']) => void
}

export const SearchPanel = ({ users, param, setParam }: SearchPanelProps) => {
  return (
    <Form style={{ marginBottom: '2rem' }} layout={'inline'}>
      <Form.Item>
        <Input
          type="text"
          value={param.name}
          placeholder={'项目名'}
          onChange={(evt) => {
            setParam({
              ...param,
              name: evt.target.value,
            })
          }}
        />
      </Form.Item>
      <Form.Item>
        <UserSelect
          defaultOptionName={'负责人'}
          value={param.personId}
          onChange={(value) =>
            setParam({
              ...param,
              personId: value,
            })
          }
        ></UserSelect>
      </Form.Item>
    </Form>
  )
}
